<template>
  <div id="right">
    <h1>{{ article.title }}</h1>
    <article-info :article="article"/>

    <div id="content-text">
      {{article.content}}
    </div>

    <div id="comment-input">
      <div>
        <div class="username">
          {{ username }}
        </div>
        <div class="write">
          <div><input type="text"></div>
          <div style="width:9%;">评论</div>
        </div>
      </div>
    </div>

    <h3 style="color:#2C3E50;width:92%;margin:0 auto;padding-top:20px;">文章评论</h3>
    <comment-list :comments="comments"/>

    <h3 style="color:#2C3E50;width:92%;margin:0 auto;padding-top:20px;">相关推荐</h3>
    <div id="recommend">
      <article-item v-for="i in 3" :key="i.title" :article="articles[i-1]" />
    </div>

  </div>
</template>

<script>
import ArticleInfo from "./ArticleInfo";
import CommentList from "./CommentList";
import ArticleItem from "../index/ArticleItem";
export default {
  name: "ArticleDetail",
  components:{ArticleInfo,CommentList,ArticleItem},
  props:{
    article:Object,
    articles: Array
  },
  data(){
    return {
      comments:[{name:"华大经理",date:"2021-8-02",content:"优质的评论可以提高文章的权重"},
        {name:"李天豪",date:"2021-7-11",content:"到了天花板？机器学习还在艰难挣扎的我，还需要更加努力！加油！"},
        {name:"银河工程",date:"2021-2-21",content:"优质的评论可以提高文章的权重,大家多多贡献文字哦！"}],
      username: null
    }
  },
  mounted(){
    this.username = window.sessionStorage.getItem("userId") ? window.sessionStorage.getItem("userName") : "登入即可评论"
  }
}
</script>

<style scoped>
#right{
  box-shadow: 1px 1px 2px 2px #d0d2d1,
              -1px -1px 2px 2px #d0d2d1;
  padding-bottom:20px;
}
#right h1{
  margin-top:4px;
  width:100%;
  text-align: center;
}
#right > div{
  width:92%;
  margin:0 auto;
}

#content-text{

  font-size:20px;
  line-height:30px;
  text-indent: 2em;

  padding-bottom:26px;
  border-bottom: 1px solid #D7DADB;
}

/* 评论 */
#comment-input{
  padding-top:10px;
}
#comment-input .username{
  line-height: 20px;
  color:#2C3E50;
}
.write > div:first-child{
  width:90%;
}
#comment-input .write{
  height:30px;
  margin-top:4px;
}
#comment-input .write > div{
  display: inline-block;
  line-height: 30px;
  vertical-align: top;
}
#comment-input input{
  width:100%;
  height:30px;
  outline:none;
  font-size:16px;
  border:1px solid #ccc;
  color:#ccc;
  padding-left:10px;

}
#comment-input input:focus{
  outline:none;
  color:#2C3E50;
  box-shadow: 1px 1px 1px 1px #6DBCDB,
              -1px -1px 1px 1px #6DBCDB;
}
/* 评论按钮 */
#comment-input .write > div:last-child{
  background-color: #FC4349;
  color:white;
  text-align: center;
}
#comment-input .write > div:last-child:hover{
  cursor:pointer;
}


</style>
